<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <script language="javascript">
            
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
        
        setupWebViewJavascriptBridge(function(bridge) {
             bridge.registerHandler('testJSFunction', function(data, responseCallback) {
                   alert('JS方法被调用:'+data);
                   responseCallback('js执行过了');
                })
         })
         
         
       function scanClick() {
            WebViewJavascriptBridge.callHandler('scanClick', {'foo': 'bar'}, function(response) {
                 alert('扫描结果:' + response);
                 document.getElementById("returnValue").value = response;
             })
         }
        
        
        function locationClick() {
            WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
                alert(response);
                document.getElementById("returnValue").value = response;
            });
        }
        
        
        function colorClick() {
            var params = {'r':255,'g':183,'b':255,'a':1.0};
            WebViewJavascriptBridge.callHandler('colorClick',params);
        }
        
        
        function shareClick() {
            var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
            WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
                alert(response);
                document.getElementById("returnValue").value = response;
            });
        }
        
        
        function payClick() {
            var params = {'order_no':'201511120981234','channel':'wx','amount':1,'subject':'粉色外套'};
            WebViewJavascriptBridge.callHandler('payClick',params,function(response) {
                alert(response);
                document.getElementById("returnValue").value = response;
            });
        }
       
        
        function shake() {
            WebViewJavascriptBridge.callHandler('shakeClick');
        }
        
    
        function goBack() {
            WebViewJavascriptBridge.callHandler('goback');
        }
        
        
        
        function asyncAlert(content) {
            setTimeout(function(){
                       alert(content);
                   },1);
        }
        
        
            </script>
        </head>

<body>
    <h1>这是按钮调用</h1>
    <input id = 'scanBtn' type="button" value="扫一扫" onclick="scanClick()"/>
    <input id = 'locationBtn' type="button" value="获取定位" onclick="locationClick()" />
    <input id = 'colorBtn' type="button" value="修改背景色" onclick="colorClick()" />
    <input id = 'shareBtn' type="button" value="分享" onclick="shareClick()" />
    <input id = 'payBtn' type="button" value="支付" onclick="payClick()" />
    <input id = 'shakeBtn' type="button" value="摇一摇" onclick="shake()" />
    <input id = 'gobackBtn' type="button" value="返回" onclick="goBack()" />
    
    <h1>这是文件上传</h1>
    
    <input type="file" />
    
    <h1>这是回调结果展示区</h1>
    <textarea id ="returnValue" type="value" rows="5" cols="50">
        
    </textarea>
    
    <h4>竖直方向的表头：</h4>
    <table border="1" style="width:300px;height:600px">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th>电话</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <th>传真</th>
            <td>555 77 855</td>
        </tr>
    </table>
    
    
</body>
</html>
